<template>
	<view class="addPet">
		<!-- 表单部分 -->
		<view class="formCard">
			<u--form
				labelPosition="left"
				:model="formData"
				:rules="rules"
				ref="uForm"
			>
				<u-form-item
					label="宠物头像"
					labelWidth="80"
					prop="petObj.avatar_file"
					ref="item0"
				>
					<uni-file-picker
						return-type="object"
						v-model="formData.petObj.avatar_file"
					></uni-file-picker>
				</u-form-item>
				<u-form-item
					label="宠物姓名"
					labelWidth="80"
					prop="petObj.name"
					borderBottom
					ref="item1"
					required
				>
					<u--input
						v-model="formData.petObj.name"
						placeholder="请输入宠物名称"
						border="none"
					></u--input>
				</u-form-item>
				<u-form-item
					label="宠物类型"
					labelWidth="80"
					prop="petObj.petType"
					borderBottom
					@click="showPetType = true;"
					ref="item2"
					required
				>
					<u--input
						v-model="formData.petObj.petType"
						disabled
						disabledColor="#ffffff"
						placeholder="汪 or 喵 or 其他"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
					label="宠物品种"
					labelWidth="80"
					prop="petObj.petKind"
					borderBottom
					ref="item3"
				>
					<u--input
						v-model="formData.petObj.petKind"
						placeholder="请输入宠物品种"
						border="none"
					></u--input>
				</u-form-item>
				<u-form-item
					label="宠物性别"
					labelWidth="80"
					prop="petObj.sex"
					borderBottom
					ref="item4"
					required
				>
					<u-radio-group
						v-model="formData.petObj.sex"
						@change="sexChange"
					>
					    <u-radio
							v-for="(item, index) in sexList"
							:key="index"
							:label="item.name"
							:name="item.value"
							style="margin-right: 20px;"
					    >
					    </u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item
					label="宠物生日"
					labelWidth="80"
					prop="petObj.birthday"
					borderBottom
					@click="showBirthday = true;"
					ref="item5"
					required
				>
					<u--input
						v-model="formData.petObj.birthday"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择日期"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
					label="到家日期"
					labelWidth="80"
					prop="petObj.arriveTime"
					borderBottom
					@click="showArriveTime = true;"
					ref="item6"
					required
				>
					<u--input
						v-model="formData.petObj.arriveTime"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择日期"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
					label="是否绝育"
					labelWidth="80"
					prop="petObj.jueYu"
					borderBottom
					ref="item7"
				>
					<u-radio-group
						v-model="formData.petObj.jueYu"
						@change="jueYuChange"
					>
					    <u-radio
							v-for="(item, index) in jueYuList"
							:key="index"
							:label="item.name"
							:name="item.value"
							style="margin-right: 50px;"
					    >
					    </u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item
					label="宠物体重"
					labelWidth="80"
					prop="petObj.weight"
					borderBottom
					ref="item8"
				>
					<u--input
						v-model="formData.petObj.weight"
						placeholder="请输入宠物体重"
						border="none"
					></u--input>
				</u-form-item>
			</u--form>
			<u-action-sheet
				:show="showPetType"
				:actions="petTypeAction"
				title="请选择宠宝类型"
				@close="showPetType = false"
				@select="petTypeSelect"
			>
			</u-action-sheet>
			<u-datetime-picker
				:show="showBirthday"
				@close="showBirthday = false"
				@cancel="showBirthday = false"
				@confirm="birthdaySelect"
				title="请选择宠物生日"
				mode="date"
			></u-datetime-picker>
			<u-datetime-picker
				:show="showArriveTime"
				@close="showArriveTime = false"
				@cancel="showArriveTime = false"
				@confirm="arriveTimeSelect"
				title="请选择宠物到家日期"
				mode="date"
			></u-datetime-picker>
		</view>
		<view class="btnGroup">
			<u-button
				type="primary"
				text="创建宠物"
				@click="onCreatePet"
				:disabled="!formData.petObj.name.length"
			></u-button>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database(); // 联通数据库
	
	export default {
		data() {
			return {
				showPetType: false,
				showBirthday: false,
				showArriveTime: false,
				formData: {
					petObj: {
						avatar_file: null,
						name: '',
						petType: '', // 宠物类型
						petKind: '', // 宠物品种
						sex: 1,
						birthday: '', // 宠物生日
						arriveTime: '', // 到家日期
						jueYu: 0, // 是否绝育
						weight: '', // 宠物体重
					},
				},
				sexList: [
					{ name: "男宝宝", value: 1 },
					{ name: "女宝宝", value: 2 }
				],
				petTypeAction: [
					{ name: "狗宝宝" },
					{ name: "猫宝宝" },
					{ name: "其他" }
				],
				jueYuList: [
					{ name: '否', value: 0 },
					{ name: '是', value: 1 },
				],
				rules: {
					'petObj.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					// 'petObj.sex': {
					// 	required: true,
					// 	message: '请选择宠宝性别',
					// 	trigger: ['blur', 'change']
					// },
					'petObj.weight': {
						trigger: ['blur', 'change'],
					}
				},
			}
		},
		methods: {
			// 时间戳处理函数
			formatterDate(val) {
				const date =  new Date(val);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}-${month}-${day}`
			},
			sexChange(e) {
				this.formData.petObj.sex = e;
				this.$refs.uForm.validateField('petObj.sex'); // 验证表单
			},
			jueYuChange(e) {
				this.formData.petObj.jueYu = e;
				this.$refs.uForm.validateField('petObj.jueYu');
			},
			//点击提交按钮
			onCreatePet(){
				console.log(this.formData.petObj);
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title:"创建中..."
					})
					this.addPetData();
				}).catch(errors => {
					console.error(errors);
				})
			},
			// 向圈子博文数据表中添加数据
			addPetData(){
				db.collection("pet_information").add({
					...this.formData.petObj
				}).then(res=>{					
					uni.hideLoading();
					uni.showToast({
						title:"创建成功"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/index/index"
						})
					},800)
				})
			},
			petTypeSelect(e) {
				this.formData.petObj.petType = e.name;
				this.$refs.uForm.validateField('petObj.petType')
			},
			birthdaySelect(e) {
				const date = this.formatterDate(e.value);
				this.formData.petObj.birthday = date;
				this.$refs.uForm.validateField('petObj.birthday');
				this.showBirthday = false;
			},
			arriveTimeSelect(e) {
				const date = this.formatterDate(e.value);
				this.formData.petObj.arriveTime = date;
				this.$refs.uForm.validateField('petObj.arriveTime')
				this.showArriveTime = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
.addPet {
	padding: 20rpx;
	background-color: #f6f6f6;
	height: 100vh;
	.formCard {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	}
}

  .uni-input-border,
  .uni-textarea-border {
    width: 100%;
    font-size: 14px;
    color: #666;
    border: 1px #e5e5e5 solid;
    border-radius: 5px;
    box-sizing: border-box;
  }

  .uni-input-border {
    padding: 0 10px;
    height: 35px;

  }

  .uni-textarea-border {
    padding: 10px;
    height: 80px;
  }

  .uni-button-group {
    margin-top: 50px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
  }

  .uni-button {
    width: 184px;
  }
</style>
